import {createStore} from 'vuex'
import {ref} from 'vue'
import {CHANGE_INFO} from './mutation_type'
import homeMudle from './modules/home'
import counterModule from './modules/counter'

const store = createStore({
  state: () => ({
    // 模拟数据
    counter: 12,
    rootCounter: 100,
    name: "coderwhy",
    level: 100,
    avatarURL: "http://xxxxxx",
    frends: [
      {id: 100, name: "why", age: 18},
      {id: 101, name: "kobe", age: 20},
      {id: 102, name: "james", age: 22}
    ],
    // 服务器数据
    // banners: [],
    // recommends: []
  }),
  // state() {
  //   return {
  //   }
  // }
  mutations: {
    increment(state) {
      state.counter++
    },
    changeName(state, payload) {
      state.name = payload
    },
    optionChangeName(state, payload){
      state.name = payload
    },
    // changeInfo(state, payload){
    //   state.name = payload.name
    //   state.level = payload.level
    // },
    [CHANGE_INFO](state, payload){ // 这里是对象的key, 写成CHANGE_NAME(){},相当于固定的字符串,而不是变量
      state.name = payload.name
      state.level = payload.level
      // 不要在mutation中执行异步操作,如下两个案例
      // setTimeout(() => {
      //   state.name = payload.name
      // })
      // 或者发送网络请求
      // fetch('http://xxxxx').then(res => {
      //   res.json().then(data => {
      //     state.name = data.name
      //   })
      // })
    },
    incrementLevel(state){
      state.level++
    },
    // changeBanner(state, banner){
    //   state.banners = banner
    // },
    // changeRecommends(state, recommend){
    //   state.recommends = recommend
    // }
  },
  getters: {
    // 1. 基本使用
    doubleCounter(state) {
      return state.counter * 2
    },
    frendsTotalAge(state) {
      return state.frends.reduce((pre, cur) => pre + cur.age, 0)
    },
    // 2. 在getters中调用其他的getters
    message(state, getters){
      // 在该getters中，可以调用其他的getters
      return `name: ${state.name} level: ${state.level} avatarURL: ${state.avatarURL} totalAge: ${getters.frendsTotalAge}`
    },
    // 3. getters是可以返回一个函数的,调入时可以传入参数
    getFrendsById(state, getters) {
      return (id) => {
        return state.frends.find(frend => frend.id === id)
      }
    },
    // name(state) {
    //   return `${state.name='kobe2'}`
    // }
  },
  actions: {
    incrementAction(context) {
      // console.log(context.commit)
      // console.log(context.getters)
      // console.log(context.state)
      context.commit('increment')
    },
    changeNameAction(context, payload) {
      // context.commit('changeName', payload)
      context.commit({
        type: 'changeName',
        payload
      })
    },
    // fetchHomeMultiDataAction(context) {
      // 1. 返回promise对象,给promise对象添加一个then方法
      // 返回整个 Promise 链
    // return fetch('http://123.207.32.32:8000/home/multidata')
    //   .then(res => res.json())
    //   .then(data => {
    //     console.log('API Response:', data);
    //     context.commit('changeBanner', data.data.banner.list);
    //     context.commit('changeRecommends', data.data.recommend.list);
    //     return new Promise((resolve, reject) => {
    //       resolve("aaaa"); // 手动返回固定字符串
    //     });
    //   })
    //   .catch(error => {
    //     console.error('API 请求失败:', error);
    //     throw error;
    //   });

      // 2. promise链式调用
      // fetch('http://123.207.32.32:8000/home/data').then(res => {
      //   return res.json()  
      // }).then(data => {
      //   console.log(data)
      // })

    // },

    // 3. async await
    // async fetchHomeMultiDataAction2(context) { // 异步函数自动返回promise对象
    //   const res = await fetch('http://123.207.32.32:8000/home/multidata')
    //   const data = await res.json()
    //   console.log(data)
    // },

    // fetchHomeMultiDataAction3(context) { // 异步函数自动返回promise对象
    //   return new Promise(async (resolve, reject) => {
    //     const res = await fetch('http://123.207.32.32:8000/home/multidata')
    //     const data = await res.json()
    //     console.log(data)       
    //   })
    // }
  },
  modules: {
    home: homeMudle,
    subCounter: counterModule
  }

})

// const selfStore = {
  
// }

export default store



